<%@ page contentType="text/html;charset=utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>基础数据管理</title>
<!-- Tell the browser to be responsive to screen width -->
<meta
	content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
	name="viewport">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/build/public.css">
<body class="hold-transition skin-blue sidebar-mini">
	<div class="wrapper">
		<!-- Main Header -->
		<%@ include file="/commons/main_header.jsp"%>

		<!-- 侧边栏 模板 -->
		<jsp:include page="/main/menu.do" />
		<div id="outerdiv"
			style="position: fixed; top: 0; left: 0; background: rgba(0, 0, 0, 0.7); z-index: 2; width: 100%; height: 100%; display: none;">
			<div id="innerdiv" style="position: absolute;">
				<img id="bigimg" style="border: 5px solid #fff;" src="" />
			</div>
		</div>
		<!-- 右边内容 -->
		<form
			action="${pageContext.request.contextPath }/basedata/basedata/expresset/expresslist.do"
			method="post">
			<div class="content-wrapper">
				<!-- Content Header (Page header) -->
				<section class="content-header">
					<h1>
						商城内容管理 <small>首页展示</small>
					</h1>
					<ol class="breadcrumb">
						<li><a href="#"><i class="fa fa-dashboard"></i> 位置</a></li>
						<li class="active">首页展示</li>
					</ol>
				</section>

				<!-- Main content -->
				<section class="content">
					<!-- Main content -->
					<div class="row">
						<div class="col-lg-12">
							<div class="panel panel-default">
								<div class="panel-heading" style="height: 50px">
									<font size="4">首页轮播图展示<a href="#" class="btn btn-info" data-toggle="modal" style=" float:right" data-target="#addBanner">新增</a></font>
								</div>
								<!-- /.panel-heading -->
								<table class="table table-bordered table-striped "
									id="bannerTab">
									<tr>
										<th>ID</th>
										<th>详情</th>
										<th>图片</th>
										<th>操作</th>
									</tr>
									<tbody>
										<form>
											<c:forEach items="${bannerList}" var="banner">
												<tr>
													<td>${banner.id}</td>
													<td>${banner.name}</td>
													<td>
														
														
														<img id='pic${banner.id}' src='${pageContext.request.contextPath }/main/shop/bannerPic.do?id=${banner.id}' height='100' width='100' onclick="showPic(${banner.id})"/>
														
														</td>
													<td><a href="#" class="btn btn-primary btn-xs"
														data-toggle="modal" data-target="#editBanner"
														onclick="editBanner(${banner.id})">修改</a> <a href="#"
														class="btn btn-danger btn-xs"
														onclick="deleteBanner(${banner.id})">删除</a></td>
												</tr>
											</c:forEach>
										</form>
									</tbody>
								</table>
							</div>
						</div>
					</div>
				</section>
				<!-- 修改banner框 -->
				<div class="modal fade" id="editBanner" tabindex="-1" role="dialog"
					aria-labelledby="myModalLabel">
					<div class="modal-dialog" role="document">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal"
									aria-label="Close">
									<span aria-hidden="true">&times;</span>
								</button>
								<h4 class="modal-title" id="myModalLabel">修改banner图信息</h4>
							</div>
							<div class="modal-body">
								<form class="form-horizontal" id="editbanner_form">
									<input type="hidden" id="bannerId" name="id" />
									<input type="hidden" id="bannerUrlId" name="imgurl" />
									<div class="form-group">
										<label for="" class="col-sm-2 control-label">详情</label>
										<div class="col-sm-10">
											<input type="text" class="form-control" id="bannerName"
												placeholder="名称" name="name">
										</div>
									</div>

									<div class="form-group">
										<label for="edit_linkMan" class="col-sm-2 control-label">图片</label>
										<div class="col-sm-10">
											<input type="file" name="uploadFile" id="upload_file"
												style="margin-bottom: 10px;">
										</div>
									</div>
								</form>
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-default"
									data-dismiss="modal">关闭</button>
								<button type="button" class="btn btn-primary"
									onclick="updateBanner()">保存</button>
							</div>
						</div>
					</div>
				</div>
				
				
				<!-- 新增banner框 -->
				<div class="modal fade" id="addBanner" tabindex="-1" role="dialog"
					aria-labelledby="myModalLabel">
					<div class="modal-dialog" role="document">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal"
									aria-label="Close">
									<span aria-hidden="true">&times;</span>
								</button>
								<h4 class="modal-title" id="myModalLabel">修改banner图信息</h4>
							</div>
							<div class="modal-body">
								<form class="form-horizontal" id="addbanner_form">
									<div class="form-group">
										<label for="" class="col-sm-2 control-label">详情</label>
										<div class="col-sm-10">
											<input type="text" class="form-control" id="bannerName"
												placeholder="名称" name="name">
										</div>
									</div>

									<div class="form-group">
										<label for="edit_linkMan" class="col-sm-2 control-label">图片</label>
										<div class="col-sm-10">
											<input type="file" name="uploadFile" id="upload_file"
												style="margin-bottom: 10px;">
										</div>
									</div>
								</form>
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-default"
									data-dismiss="modal">关闭</button>
								<button type="button" class="btn btn-primary"
									onclick="addBanner()">保存</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</form>
		<div class="control-sidebar-bg"></div>
	</div>


	<!-- /.content -->

	<!-- ./wrapper -->
	<!-- /.右边内容  -->

	<%@ include file="/commons/main_footer.jsp"%>
	<%-- <%@ include file="/commons/control_sidebar.jsp"%>   --%>

	<!-- REQUIRED JS SCRIPTS -->
	<%@ include file="/commons/public.jsp"%>

	<!-- 弹窗提示 -->
	<%@ include file="/commons/modal.jsp"%>


</body>
<script>
//新增banner
function addBanner(){
	var formData = new FormData($("#addbanner_form")[0]);
	$.ajax({
        type : "post",
        data : formData,
        url : '${pageContext.request.contextPath }/main/shop/addBanner.do',
      /*   dataType : 'json', */
        contentType: false, //必须
        processData: false, //必须
        success : function(data) {
            console.log('success');
            alert('success')
            window.location.reload();
        },
        error : function(data) {
            console.log('false');
           	alert('erro')
           	window.location.reload();
        }
    });
}




//删除banner
function deleteBanner(id){
	$.ajax({
		type:"get",
		url:"${pageContext.request.contextPath }/main/shop/deleteBanner.do",
		data:{"id":id},
		success:function(data) {
			window.location.reload();
		}
	});
}
//修改banner
function editBanner(id){
	//先获取要修改的banner数据填充到表格中
	$.ajax({
		type:"get",
		url:"${pageContext.request.contextPath }/main/shop/selectBanner.do",
		data:{"id":id},
		success:function(data) {
			 $("#bannerId").val(data.id);
			 $("#bannerName").val(data.name);
			 $("#bannerUrlId").val(data.imgurl);
		}
	});
}
//修改框-点击保存
function updateBanner(){
	var formData = new FormData($("#editbanner_form")[0]);
	$.ajax({
        type : "post",
        data : formData,
        url : '${pageContext.request.contextPath }/main/shop/updateBanner.do',
      /*   dataType : 'json', */
        contentType: false, //必须
        processData: false, //必须
        success : function(data) {
            console.log('success');
            alert('success')
            window.location.reload();
        },
        error : function(data) {
            console.log('false');
            alert(data.msg);
        }
    });
	
	
}


/**
 * 图片的弹出层设置
 */
function showPic(id){
			var _this =$('#pic'+id);
			imgShow('#outerdiv',"#innerdiv","#bigimg",_this);
		}
	
	 
	 function imgShow(outerdiv, innerdiv, bigimg, _this){  
	        var src = _this.attr("src");//获取当前点击的pimg元素中的src属性  
	        $(bigimg).attr("src", src);//设置#bigimg元素的src属性  
	      
	            /*获取当前点击图片的真实大小，并显示弹出层及大图*/  
	        $("<img/>").attr("src", src).load(function(){  
	            var windowW = $(window).width();//获取当前窗口宽度  
	            var windowH = $(window).height();//获取当前窗口高度  
	            var realWidth = this.width;//获取图片真实宽度  
	            var realHeight = this.height;//获取图片真实高度  
	            var imgWidth, imgHeight;  
	            var scale = 0.8;//缩放尺寸，当图片真实宽度和高度大于窗口宽度和高度时进行缩放  
	              
	            if(realHeight>windowH*scale) {//判断图片高度  
	                imgHeight = windowH*scale;//如大于窗口高度，图片高度进行缩放  
	                imgWidth = imgHeight/realHeight*realWidth;//等比例缩放宽度  
	                if(imgWidth>windowW*scale) {//如宽度扔大于窗口宽度  
	                    imgWidth = windowW*scale;//再对宽度进行缩放  
	                }  
	            } else if(realWidth>windowW*scale) {//如图片高度合适，判断图片宽度  
	                imgWidth = windowW*scale;//如大于窗口宽度，图片宽度进行缩放  
	                            imgHeight = imgWidth/realWidth*realHeight;//等比例缩放高度  
	            } else {//如果图片真实高度和宽度都符合要求，高宽不变  
	                imgWidth = realWidth;  
	                imgHeight = realHeight;  
	            }  
	                    $(bigimg).css("width",imgWidth);//以最终的宽度对图片缩放  
	              
	            var w = (windowW-imgWidth)/2;//计算图片与窗口左边距  
	            var h = (windowH-imgHeight)/2;//计算图片与窗口上边距  
	            $(innerdiv).css({"top":h, "left":w});//设置#innerdiv的top和left属性  
	            $(outerdiv).fadeIn("fast");//淡入显示#outerdiv及.pimg  
	        });  
	          
	        $(outerdiv).click(function(){//再次点击淡出消失弹出层  
	            $(this).fadeOut("fast");  
	        });  
	    }  
	    
	</script>

</html>
